<template>
	<view style="overflw:hidden;">
		<!-- 头部 -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新朋友</block>
		</cu-custom>
        <view class='back' @click="back"></view>
		<!-- 列表 -->
		<view style="margin-top: 50rpx;">
		    <scroll-view scroll-y :style="[{height:'calc(100vh'}] "
		     :scroll-with-animation="true" :enable-back-to-top="true">
		    	<template v-for="(item,index) in examineList">
					<view class="view_root">
						<!-- 头像 -->
						
							<view class="cu-avatar round imgBox">
								<text>{{item.imgBox}}</text>
							</view>
						
						<!-- <view class="imgBox"></view> -->
						<!-- 名字 -->
						<view class="name">{{item.body.fromMember.name}}({{item.body.fromMember.member_id}})</view>
						<!-- 理由 -->
						<view class="clear"></view>
						<view class="text">{{item.body.fromTitle}}</view>
						<view class="view_button">
							<!-- 同意按钮 -->
							<button size="mini" class="yes" type='primary' @click="examineFriend(item,1)">同意</button>
							<!-- 拒绝按钮 -->
							<button size="mini" class="no" type='warn' @click="examineFriend(item,1)">拒绝</button>
						</view>
						<!-- <view class="clear"></view> -->
					</view>
		    	</view>
		    </scroll-view>
				<newMessage ref='newMessage'></newMessage>
		</view>
	</view>
</template>

<script>
	import newMessage from '../../asstess/newMessage/newMessage'
	export default {
		data() {
			return {
				examineList:[]
			}
		},
		onLoad() {
            this.$Socket.action('fetchFriendApplyList',null,(res)=>{
                this.examineList = res.data
                console.log(this.examineList)
            },()=>{})
            
			// let list = [{}];
			// for (let i = 0; i <= 20; i++) {
			// 	list[i] = {};
			// 	list[i].imgBox = i
			// 	list[i].name = '嵚欢度'+ i
			// 	list[i].text = '看你头像挺帅，认识一下？' + i
			// }
			// this.list = list;
		},
		methods: {
			back() {
                uni.switchTab({
                    url: '/pages/user/indexes'
                });
		    },
            openData () {
                let newChatAlert = (data) =>{
                    if (data.head.fromMemberId != this.userData.member_id) {
                        console.log('data新消息',data);
                        this.$refs.newMessage.showModal(data,this.userData.member_id) 
                    }
                }
                let listRefresh = (data) =>{
                    console.log(data,'会话列表刷新')
                }
                let talkDetailRefresh = (data) =>{
                    console.log(data,'会话详情刷新')
                }
                let TalkWithMsg = (msg) => {
                    if(!msg.isMe){
                        console.log('msg新消息',msg)
                        // this.$refs.newMessage.showModal(msg,this.userData.member_id)
                    }
                }
                // this.$Socket.addTalkObjectCallback(
                //     newChatAlert,
                //     listRefresh,
                //     talkDetailRefresh,
                //     TalkWithMsg
                // );
            },
            examineFriend(item, type) {
            let params = {
                clientMsgId: item.head.clientMsgId,
                userSelect: type
            }
            this.$Socket.action('examineToFriend', params,()=>{},()=>{})
            },
		},
		components: {
			newMessage
		},
	}
</script>

<style>
.back{
        background-color: transparent;
        width: 62px;
        height: 45px;
        position: fixed;
        top: 0px;
        z-index: 9999;
    }
.view_root {
	border-bottom: 1px solid #cccccc;
	position: relative;
	padding: 5rpx;
	margin-top: 10rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
}
.imgBox {
	width: 100rpx;
	height: 100rpx;
	float: left;
	text-align: center;
}
.name {
	float: left;
	margin-top: 10rpx;
	margin-left: 10rpx;
	font-size: 40rpx;
}
.text {
	float: left;
	position: absolute;
	margin-left: 10rpx;
	top:36px;
	left: 52px;
	font-size: 20rpx;
}
.view_button {
	float: right;
	position: absolute;
	top: 20rpx;
	right: 0;
}
.yes{
	margin-right: 10rpx;
}
.clear {
	clear:both ;
}
</style>

